import Vue from 'vue'
import VueRouter from 'vue-router'
//引入目标路由页面
import Learn from '../views/Learn.vue'

//全局引入
Vue.use(VueRouter)

// Vue Router是Vue官方的路由管理器。它与Vue深度集成，让构建单页面变得更加的容易。路由实际上可以理解为指向，你点击一下按钮，将会跳转到指定的页面中，实现路由的跳转：类似a标签，但是和a标签有非常显著的区别,a标签会进行页面的跳转，页面相当于是重新进行加载，相当于是重新打开了一个网页

//自定义路由
const routes = [
    {
        //路由的路径
        path: '/',
        name: 'Learn',
        //对应路由界面的第一种写法
        component: () => import('../views/Learn.vue')
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        //额外引入路由页面的第二种写法,以后都采用这种写法，记一种就行，太多记不住
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path: '/one',
        name: 'One',
        component: () => import(/* webpackChunkName: "about" */ '../views/one/one.vue'),
        children: [
            /*
                1. xxx.html/#/user/1              params 动态路由参数
                2. ooo.html/#/user?userid=1       query  动态路由参数,如果使用这种方式，那么路由参数不需要修改
            */
            {
                // params动态路由参数  url:/two/1    在下面path后面加:userid
                path: '/two/:userid',
                name: 'Two',
                component: () => import(/* webpackChunkName: "about" */ '../views/one/two/two.vue'),
                children: [
                    {
                        path: '/three',
                        name: 'Three',
                        component: () => import(/* webpackChunkName: "about" */ '../views/one/two/three/three.vue')
                    }
                ]
            }
        ],
    },
]
//创建vueRouter对象，返回该对象
const router = new VueRouter({
    mode: 'history',//路由模式，默认为hash模式
    base: process.env.BASE_URL,//路由基础路径
    routes  //这里就是相当于是 routes: routes
    //可以直接写在里面，不过提出去直观一点，类似下面这种写法
    //routes: [.....]
})

export default router
